<template>
  <div v-if="isLoad">
    <el-card v-for="item in tables" :key="item.Id" :header="item.Label" style="margin-bottom: 10px;">
      <w-table
        :key="item.Id"
        :data="item.ColList"
        :columns="item.columns"
        row-key="Id"
        :is-paging="false"
      >
        <template slot="action" slot-scope="e">
          <el-radio-group v-model="e.row.Operate">
            <el-radio :label="0">只读</el-radio>
            <el-radio :disabled="isAllowEdit == false" :label="1">可编辑</el-radio>
            <el-radio :label="2">隐藏</el-radio>
          </el-radio-group>
        </template>
      </w-table>
    </el-card>
    <div v-if="readonly == false" style="text-align: center;margin-top: 10px;">
      <el-button type="primary" @click="savePower">保存</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script>
import { GetStructure } from '@/customForm/api/form'
import * as nodePowerApi from '@/flow/api/flowNodePower'
export default {
  components: {
  },
  props: {
    nodeId: {
      type: String,
      default: null
    },
    flowId: {
      type: String,
      default: null
    },
    formId: {
      type: String,
      default: null
    },
    isAllowEdit: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    isLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tables: [],
      structure: null,
      powers: null
    }
  },
  watch: {
    isLoad: {
      handler(val) {
        if (val) {
          this.loadStructure()
          this.loadPower()
        } else {
          this.structure = null
          this.powers = null
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    async savePower() {
      const list = []
      this.tables.forEach(c => {
        if (c.ColList && c.ColList.length > 0) {
          c.ColList.forEach(a => {
            list.push({
              ColId: a.Id,
              Operate: a.Operate
            })
          })
        }
      })

      await nodePowerApi.Sync({
        FlowId: this.flowId,
        NodeId: this.nodeId,
        Power: list
      })
      this.$message({
        message: '保存成功!',
        type: 'success'
      })
    },
    async loadPower() {
      const res = await nodePowerApi.Gets(this.nodeId)
      const power = {}
      res.forEach(c => {
        power[c.ColId] = c.Operate
      }
      )
      this.powers = power
      if (this.structure != null) {
        this.reset()
      }
    },
    async loadStructure() {
      const res = await GetStructure({
        FormId: this.formId,
        IsSystem: false
      })
      this.structure = res
      if (this.powers != null) {
        this.reset()
      }
    },
    reset() {
      const list = []
      const cols = {}
      this.structure.Children.forEach(c => {
        const data = {
          Id: c.Id,
          Name: c.Label,
          ColList: []
        }
        const t = []
        this.initRow(c, null, t)
        if (t.findIndex(a => a.GroupId != null) !== -1) {
          data.columns = [{
            key: 'GroupName',
            title: '分组名',
            align: 'center',
            minWidth: '200px'
          }, {
            key: 'Name',
            title: '字段名',
            align: 'left',
            minWidth: '200px'
          }, {
            key: 'action',
            title: '权限',
            align: 'left',
            slotName: 'action'
          }]
        } else {
          data.columns = [{
            key: 'Name',
            title: '字段名',
            align: 'left',
            width: '200px'
          }, {
            key: 'action',
            title: '权限',
            align: 'left',
            slotName: 'action'
          }]
        }
        cols[c.Id] = t
        list.push(data)
      })
      console.log(list)
      this.tables = list
      this.$nextTick(() => {
        this.tables.forEach(c => {
          c.ColList = cols[c.Id]
        })
      })
    },
    initRow(row, group, list) {
      if (row.Type === 2) {
        const item = {
          Id: row.Id,
          Name: row.Label,
          Operate: this.powers[row.Id] == null ? 0 : this.powers[row.Id]
        }
        if (group != null) {
          item.GroupId = group.Id
          item.GroupName = group.Label
          if (group.colId == null) {
            group.colId = row.Id
            item.colSpan = {
              GroupName: group.Children.length
            }
          } else {
            item.colSpan = {
              GroupName: 0
            }
          }
        }
        list.push(item)
        return
      } else if (row.Type === 1) {
        group = row
      }
      if (row.Children && row.Children.length > 0) {
        row.Children.forEach(r => {
          this.initRow(r, group, list)
        })
      }
    }
  }
}
</script>
